<!--申请退款-->
<template>
  <div>
    <van-nav-bar title="选择退货地址" left-arrow @click-left="closeWin" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
    </van-nav-bar>

    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="reason">
      <div v-if="currentDefaultAddress!=null">
        <div class="reason_item">
          <div>
            <div style="margin:10px;">
              <span>收货人：</span>
              <span>{{currentDefaultAddress.addressRealName}}</span>
              <span style="margin-left:20px">{{currentDefaultAddress.addressMobile}}</span>
            </div>
            <div style="margin:10px;">
              <span>退货地址：</span>
              <span>{{currentDefaultAddress.addressAreaInfo}}{{currentDefaultAddress.address}}</span>
            </div>
          </div>
          <div style="margin-top:3%">
            <span @click="toAddress">
              <img
                src="../../../../../static/img/right.png"
                alt
                style="width:10px;height:15px;margin-left:15px;"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="reason">
      <div class="reason_item">
        <div>
          <div style="margin:10px;">
            <span>管理退货地址</span>
          </div>
          <div style="margin:10px;color:#999999;font-size:12px;align-height:20px;">
            <span>如因您提供的退货地址错误，导致卖家无法退货或退货商品后无法送达，由您承担此产生的后果。</span>
          </div>
        </div>
        <div style="margin-top:3%">
          <span @click="toManage">
            <img
              src="../../../../../static/img/right.png"
              alt
              style="width:10px;height:15px;margin-left:15px;"
            />
          </span>
        </div>
      </div>
    </div>
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="reason">
      <div class="reason_item">
        <div>
          <div class="c_11" style="display:flex">
            <span class="c_3" style="margin-top:3px;margin-right:5px;">退款说明:</span>
            <span class="cc" @change="note">
              <van-field v-model="refundNote" placeholder="选填" @click="note" />
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="but">
      <div class="btn2" @click="cancle">取消并返回</div>
      <div class="btn3" @click="confirm">发送退货地址</div>
    </div>
    <van-popup v-model="showReason" position="right" :style="{ height: '100%',width:'100%' }">
      <div>
        <van-nav-bar title="选择退货地址" left-arrow @click-left="close" :border="false">
          <van-icon name="arrow-left" slot="left" color="#000" size="20" />
        </van-nav-bar>
        <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
        <div class="reason">
          <div class="reason_item" v-for="(item,index) in expressList" :key="index">
            <div>
              <div style="margin:5px;">
                <span>收货人：</span>
                <span>{{item.addressRealName}}</span>
                <span style="margin-left:20px">{{item.addressMobile}}</span>
              </div>
              <div style="margin:5px;">
                <span>退货地址：</span>
                <span>{{item.addressAreaInfo}}{{item.address}}</span>
              </div>
            </div>
            <div style="margin-top:3%">
              <van-radio
                :name="item.addressId"
                checked-color="#ff6000"
                v-model="reason"
                @click="select(item)"
              ></van-radio>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import part8 from "_c/markets/refund/part8.vue";
import part2 from "_c/markets/refund/part2.vue";
import part3 from "_c/markets/refund/part3.vue";
import part4 from "_c/markets/refund/part4.vue";
import part5 from "_c/markets/refund/part5.vue";
import { getFun, getTimer } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  name: "orderDetail",
  components: {
    part8,
    part2,
    part3,
    part4,
    part5
  },
  data() {
    return {
      id: "",
      userId: "",
      reason: "1",
      ordersId: "",
      addressId: "", //地址id
      addressRealName: "", //名字
      addressMobile: "", //手机号
      addressAreaInfo: "", //省市地区
      address: "", //具体地址
      addressDetail: "",
      note: "", //退款说明
      addressUser: "", //
      refundNote: "",
      showReason: false,
      expressList: [],
      info: [],
      addressIsDefault: "",
      currentDefaultAddress: {},
      backType: "",
      url3: this.$api + "/marketorderservice/api/v1/market/orders", //获取钱款明细
      goodsId: "", //商品
      nickName: "", //昵称
      buyerId: "", //买家
      sellerId: "", //卖家
      goodsCoverUrl: "", //商品图片
      avatar: "", //买家头像
      savatar: "" //卖家头像
    };
  },
  methods: {
    //获取钱款明细
    getData() {
      let that = this;
      this.$Axios
        .Get(this.url3 + "/" + this.ordersId + "/" + this.userId)
        .then(function(res) {
          that.goodsId = res.data.orders.goodsId;
          that.nickName = res.data.orders.nickName;
          that.buyerId = res.data.orders.userId;
          that.sellerId = res.data.orders.suserId;
          that.goodsCoverUrl = res.data.orders.goodsImage;
          that.avatar = res.data.orders.avatar; //买家头像
          that.savatar = res.data.orders.savatar; //卖家头像
        });
    },
    toAddress() {
      this.showReason = true;
    },
    close() {
      this.showReason = false;
    },
    cancle() {
      this.closeWin();
    },
    select(id) {
      this.currentDefaultAddress = id;
    },
    toManage() {
      this.link("/market/orders/manageAddress");
    },
    getList() {
      let that = this;
      let url = this.$api + "/marketorderservice/api/v1/market/address/list";
      let params = {
        userId: this.userId
      };
      this.$Axios.Post(url, params).then(function(res) {
        that.expressList = res.data;
        that.expressList.forEach(item => {
          if (item.addressIsDefault == "1") {
            that.reason = item.addressId;
            that.currentDefaultAddress = item;
            that.addressDetail = item.addressAreaInfo + item.address;
            that.addressMobile = item.addressMobile;
            that.addressUser = item.addressRealName;
          }
        });
        let info = that.currentDefaultAddress;
      });
    },
    confirm() {
      if (!this.addressRealName && !this.addressMobile && !this.addressDetail) {
        this.$toast("请先填写退货地址！");
      } else {
        let that = this;
        let url =
          this.$api + "/marketorderservice/api/v1/market/refund/addReceipt";
        let params = {
          addressDetail: this.addressDetail,
          addressMobile: this.addressMobile,
          addressUser: this.addressUser,
          note: this.note,
          refundId: this.refundId
        };
        this.$Axios2.Post(url, params).then(function(res) {
          if (that.backType) {
            that.closeWinToIm(
              that.nickName,
              that.goodsId,
              that.sellerId,
              that.buyerId,
              that.goodsCoverUrl,
              that.avatar,
              that.ordersId
            );
          } else {
            that.closeWin();
          }
        });
      }
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.refundId = this.$router.currentRoute.query.refundId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.backType = this.$router.currentRoute.query.backType;
    this.getList();
    this.select();
  }
};
</script>

<style scoped="">
.van-cell {
  padding: 0;
}
.reason_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  color: rgba(51, 51, 51, 1);
}
.reason_item {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
}
.reason_item:nth-last-child(1) {
  border: none;
}
.c_3 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  display: flex;
}
.but {
  position: fixed;
  bottom: 0;
  display: flex;
  text-align: center;
  width: 100%;
  font-size: 16px;
}
.btn2 {
  width: 50%;
  padding: 10px;
  border: 1px solid #e5e5e5;
}
.btn3 {
  width: 50%;
  padding: 10px;
  background-color: #ffd630;
}
</style>